<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Pragma" name="Pragma" content="no-cache">
<title>esdk_obs_browserjs_demo</title>

</head>

<body>
	
    <h3>OBS BrowserJS SDK demo</h3>
    
    <h4>Basic Configuration</h4>
    <label>AK:</label> <input type="text" value="*** Provide your Access Key ***" id="ak" size="30"/>
    <label>SK:</label> <input type="text" value="*** Provide your Secret Key ***" id="sk" size="30"/>
    <label>Server:</label> <input type="text" value="http://your-endpoint" id="server" size="30"/>
    <p>
    
    <h5>Upload File</h5>
    <label>Bucket:</label> <input type="text" value="bucketname" id="bucket4upload"/>
    <label>Key:</label> <input type="text" value="objectkey" id="key4upload"/>
    <p>
    <input type="file" id="files"/>
    <input type="button" value="Click to upload" onclick="doUpload();"/>
	<input type="button" value="Click to upload through multipart" onclick="doUploadMultipart();"/>
	<div id="speed">
	</div>
	
	<div id="progress">
	</div>
    <P>
    <h5>Download File</h5>
    <label>Bucket:</label> <input type="text" value="bucketname" id="bucket4download"/>
    <label>Key:</label> <input type="text" value="objectkey" id="key4download"/>
    <label>Type:</label>
    <select id="saveAsByType">
    	<option value="file">file</option>
		<option value="arraybuffer">arraybuffer</option>
		<option value="blob">blob</option>
		<option value="text">text</option>
	</select>
	<p>
    <input type="button" value="Click to download" onclick="doDownload();"/>
    <p>
    <h5>List Objects</h5>
    <label>Bucket:</label> <input type="text" value="bucketname" id="bucket4listobjects"/>
    <p>
    <input type="button" value="Click to list objects" onclick="doListObjects();"/>
    <p>
</body>



<!-- injector:js -->
<script src="node_modules/babel-polyfill/dist/polyfill.js"></script>
<script src="vendor/base64.js"></script>
<script src="vendor/sha.js"></script>
<script src="vendor/URI.js"></script>
<script src="vendor/md5.js"></script>
<script src="vendor/axios.js"></script>
<script src="scripts/log.js"></script>
<script src="scripts/v2Model.js"></script>
<script src="scripts/obsModel.js"></script>
<script src="scripts/xml2js.js"></script>
<script src="scripts/utils.js"></script>
<script src="scripts/enums.js"></script>
<script src="scripts/posix.js"></script>
<script src="scripts/resumable.js"></script>
<script src="scripts/obs.js"></script>
<!-- endinjector -->

<script type="text/javascript">
	
	function getObsClient(){
		var ak = document.getElementById('ak').value;
		var sk = document.getElementById('sk').value;
		var server = document.getElementById('server').value;
		var obsClient = new ObsClient({
			access_key_id: ak,
			secret_access_key: sk,
			server : server,
			timeout : 60 * 5,
		});
		return obsClient;
	}
	
	function doDownload(){
		// get object
		var bucketName = document.getElementById('bucket4download');
		var objectKey = document.getElementById('key4download');
		var saveByType = document.getElementById('saveAsByType').value;
		getObsClient().getObject({
			Bucket : bucketName.value,
			Key : objectKey.value,
			SaveByType : saveByType,
		}).then(function(result){
			if(saveByType === 'file'){
				// download file path
				console.log(result.InterfaceResult.Content.SignedUrl);
			}else{
				console.log(result.InterfaceResult.Content);
			}
		}).catch(function(err){
			console.error(err);
		});
	}
	
	var speed = document.getElementById('speed');
	var progress = document.getElementById('progress');
	function doUpload(){ 
		var bucketName = document.getElementById('bucket4upload');
		var objectKey = document.getElementById('key4upload');
		// put objects
 		getObsClient().putObject({
			Bucket:bucketName.value,
			Key:objectKey.value,
			Metadata:{property:'property-value'},
			SourceFile : document.getElementById('files').files[0],
			ProgressCallback : function(transferredAmount, totalAmount, totalSeconds){
				speed.innerHTML = transferredAmount * 1.0 / totalSeconds / 1024;
				progress.innerHTML = transferredAmount * 100.0 / totalAmount
			}
		}).then(function(result){
			console.log('CommonMsg:');
			console.log('Status-->' + result.CommonMsg.Status);
			console.log('Code-->' + result.CommonMsg.Code);
			console.log('Message-->' + result.CommonMsg.Message);
			console.log('HostId-->' + result.CommonMsg.HostId);
			console.log('InterfaceResult:');
			if(result.InterfaceResult){
				console.log('RequestId-->' + result.InterfaceResult.RequestId);
				console.log('ETag-->' + result.InterfaceResult.ETag);
				console.log('VersionId-->' + result.InterfaceResult.VersionId);
				console.log('StorageClass-->' + result.InterfaceResult.StorageClass);
			}
		}).catch(function(err){
			console.error(err);
		}); 
	}
	
	function doUploadMultipart(){
		var bucketName = document.getElementById('bucket4upload');
		var objectKey = document.getElementById('key4upload');
		
		var file = document.getElementById('files').files[0];
		var fileSize = file.size;
		getObsClient().uploadFile({
			Bucket:bucketName.value,
			Key:objectKey.value,
			Metadata:{property:'property-value'},
			SourceFile : document.getElementById('files').files[0],
			TaskNum : 3,
			ProgressCallback : function(transferredAmount, totalAmount, totalSeconds){
				speed.innerHTML = transferredAmount * 1.0 / totalSeconds / 1024;
				progress.innerHTML = transferredAmount * 100.0 / totalAmount
			}
		}).then(function(result){
			console.log('CommonMsg:');
			console.log('Status-->' + result.CommonMsg.Status);
			console.log('Code-->' + result.CommonMsg.Code);
			console.log('Message-->' + result.CommonMsg.Message);
			console.log('HostId-->' + result.CommonMsg.HostId);
			console.log('InterfaceResult:');
			if(result.InterfaceResult){
				console.log('RequestId-->' + result.InterfaceResult.RequestId);
				console.log('ETag-->' + result.InterfaceResult.ETag);
			}
		}).catch(function(err){
			console.error(err);
		});  		
	}
	
	function doListObjects(){
		var bucketName = document.getElementById('bucket4listobjects');
		// list objects
	 	getObsClient().listObjects({
			Bucket: bucketName.value,
			MaxKeys: 100,
		}).then(function(result){
			console.log('CommonMsg:');
			console.log('Status-->' + result.CommonMsg.Status);
			console.log('Code-->' + result.CommonMsg.Code);
			console.log('Message-->' + result.CommonMsg.Message);
			console.log('HostId-->' + result.CommonMsg.HostId);
			if(result.InterfaceResult){
				console.log('RequestId-->' + result.InterfaceResult.RequestId);
				console.log('Bucket-->' + result.InterfaceResult.Bucket);
				console.log('Delimiter-->' + result.InterfaceResult.Delimiter);
				console.log('Marker-->' + result.InterfaceResult.Marker);
				console.log('NextMarker-->' + result.InterfaceResult.NextMarker);
				console.log('MaxKeys-->' + result.InterfaceResult.MaxKeys);
				console.log('IsTruncated-->' + result.InterfaceResult.IsTruncated);
				console.log('Contents:');
				var j=0;
				for(;j<result.InterfaceResult.Contents.length;j++){
					console.log('Contents[' + j +  ']:');
					console.log('Key-->' + result.InterfaceResult.Contents[j]['Key']);
					console.log('LastModified-->' + result.InterfaceResult.Contents[j]['LastModified']);
					console.log('ETag-->' + result.InterfaceResult.Contents[j]['ETag']);
					console.log('Size-->' + result.InterfaceResult.Contents[j]['Size']);
					console.log('Owner[ID]-->' + result.InterfaceResult.Contents[j]['Owner']['ID']);
					console.log('Owner[Name]-->' + result.InterfaceResult.Contents[j]['Owner']['Name']);
					console.log('StorageClass-->' + result.InterfaceResult.Contents[j]['StorageClass']);
				}
				console.log('CommonPrefixes:');
				var i=0;
				for(;i<result.InterfaceResult.CommonPrefixes.length;i++){
					console.log('CommonPrefix[' + i +  ']:');
					console.log('Prefix-->' + result.InterfaceResult.CommonPrefixes[i]['Prefix']);
				}
			}
		}).catch(function(err){
			console.error(err);
		});
	}

</script>

</html>
